<template>
  <div class="execution-history-overview-wrap">
    <div class="grid-column-4">
      <icon-kpi :config="kpi_1"></icon-kpi>
      <icon-kpi :config="kpi_2"></icon-kpi>
      <icon-kpi :config="kpi_3"></icon-kpi>
      <icon-kpi :config="kpi_4"></icon-kpi>
      <icon-kpi :config="kpi_5"></icon-kpi>
    </div>
    <div class="column-divided"></div>
    <div class="grid-column-2">
      <div class="chart-container">
        <title-chart
          type="chart-cirque"
          title="已扫描敏感表级别分布TOP5"
          :dataset="pieLeftDataSet"
        ></title-chart>
      </div>
      <div class="chart-container">
        <title-chart
          type="chart-cirque"
          title="已扫描敏感表类别分布TOP5"
          :dataset="pieRightDataSet"
        ></title-chart>
      </div>
    </div>
    <div class="column-divided"></div>

    <div class="grid-column-2">
      <div class="chart-container">
        <title-chart
          type="chart-cirque"
          title="已扫描表重要数据名称分布TOP5"
          :dataset="tagCountGroupByTagNameList"
        ></title-chart>
      </div>
      <div class="chart-container">
        <title-chart
          type="chart-bar"
          title="已扫描数据库重要数据分布Top10"
          :dataset="tagCountGroupByDbNameList"
        ></title-chart>
      </div>
    </div>
    <div class="column-divided"></div>

    <div class="grid-column-2">
      <div class="chart-container">
        <title-chart
          type="chart-bar"
          title="已扫描数据库敏感表分布Top10"
          :dataset="barLeftDataSet"
        ></title-chart>
      </div>
      <div class="chart-container">
        <title-chart
          type="chart-bar"
          title="敏感字段Top10"
          :dataset="barRightDataSet"
        ></title-chart>
      </div>
    </div>
    <div class="column-divided"></div>

    <div class="grid-column-2">
      <div class="chart-container">
        <title-chart
          type="chart-bar"
          title="已扫描敏感表根据业务系统分布Top10"
          :dataset="sensitiveBusiness"
        ></title-chart>
      </div>
      <div class="chart-container">
        <title-chart
          type="chart-bar"
          title="已扫描含重要数据表根据业务系统分布Top10"
          :dataset="importantBusiness"
        ></title-chart>
      </div>
    </div>
  </div>
</template>

<script>
import IconKpi from "@/components/IconKpi";
import TitleChart from "@/components/EChart/TitleChart";
import {
  listInfo,
  queryHomeTopList,
  queryHomeList,
  queryHomeDbCount,
  queryHomeTableCount,
  queryHomeColumnCount,
  queryHomeDbAccountCount,
  queryHomeleWordList,
} from "@/api/datascan/overview/overview";
import { level } from "@/api/datascan/level/level";
import { getPercent } from "@/utils/util";
import BaseList from "@/mixins/BaseList";

export default {
  name: "overviewIndex",
  mixins: [BaseList],
  data() {
    return {
      kpi_1: {
        icon: "iconfont icon-database",
        color: "#e69138",
        label: "数据库总数",
        value: 0,
      },
      kpi_2: {
        icon: "iconfont icon-kuyonghuzongshu",
        color: "#72c140",
        label: "用户总数/库总数",
        value: 0,
      },
      kpi_3: {
        icon: "iconfont icon-chart",
        color: "#e13c39",
        label: "表总数",
        value: "0",
      },
      kpi_4: {
        icon: "iconfont icon-minganbiaozongshu",
        color: "#448ef7",
        label: "敏感表总数",
        value: "0",
      },
      kpi_5: {
        icon: "iconfont icon-minganbiaoziduanzongshu",
        color: "#efb041",
        label: "敏感字段总数",
        value: "0",
      },
      pieLeftDataSet: {
        dimensions: ["leTypeName", "dbLeTypeCount"],
        source: [],

        option: {
          legend: {
            formatter: function (name) {
              return name + " | ";
            },
          },
          tooltip: {
            show: true,
            position: function (point, params, dom, rect, size) {
              return [0, point[1]];
            },
            formatter: function (params) {
              return `<div>${params.marker} ${params.name} | ${
                params.percent ? params.percent : 0
              }%  ${params.data["dbLeTypeCount"]}</div>`;
            },
          },
        },
      },
      tagCountGroupByTagNameList: {
        dimensions: ["tagName", "count"],
        source: [],
        option: {
          legend: {
            formatter: function (name) {
              return name + " | ";
            },
          },
          tooltip: {
            show: true,
            position: function (point, params, dom, rect, size) {
              return [0, point[1]];
            },
            formatter: function (params) {
              return `<div>${params.marker} ${params.name} | ${
                params.percent ? params.percent : 0
              }%  ${params.data["count"]}</div>`;
            },
          },
        },
      },
      pieRightDataSet: {
        dimensions: ["typeName", "count"],
        source: [],
        option: {
          legend: {
            formatter: function (name) {
              return name + " | ";
            },
          },
          tooltip: {
            show: true,
            position: function (point, params, dom, rect, size) {
              return [0, point[1]];
            },
            formatter: function (params) {
              return `<div>${params.marker} ${params.name} | ${
                params.percent ? params.percent : 0
              }%  ${params.data["count"]}</div>`;
            },
          },
        },
      },
      barLeftDataSet: {
        dimensions: ["dbName", "count"],
        source: [],
        option: {
          yAxis: {
            name: "单位： 个",
            nameGap: 30,
          },
        },
      },
      importantBusiness: {
        dimensions: ["systemName", "count"],
        source: [],
        option: {
          yAxis: {
            name: "单位： 个",
            nameGap: 30,
          },
        },
      },
      sensitiveBusiness: {
        dimensions: ["systemName", "count"],
        source: [],
        option: {
          yAxis: {
            name: "单位： 个",
            nameGap: 30,
          },
        },
      },
      tagCountGroupByDbNameList: {
        dimensions: ["dbName", "count"],
        source: [],
        option: {
          yAxis: {
            name: "单位： 个",
            nameGap: 30,
          },
        },
      },
      barRightDataSet: {
        dimensions: ["dbLeTypeName", "dbLeTypeCount"],
        source: [],
        option: {
          yAxis: {
            name: "单位： 个",
            nameGap: 30,
          },
        },
      },
      minganTotle: 0,
      mingan2Totle: 0,
      minganTotleCount: 0,
    };
  },
  components: {
    IconKpi,
    TitleChart,
  },
  created() {
    // this.listInfo();
    this.queryHomeTopList();
    this.queryHomeList();

    this.queryHomeDbAccountCount();
    this.queryHomeDbCount();
    this.queryHomeTableCount();
    this.queryHomeleWordList();
    this.queryHomeColumnCount();
  },
  methods: {
    queryHomeTopList() {
      queryHomeTopList({}).then((response) => {
        if (response && response.code === 200) {
          this.tagCountGroupByDbNameList.source =
            response.data.tagCountGroupByDbNameList;

          this.tagCountGroupByTagNameList.source =
            response.data.tagCountGroupByTagNameList;
          let _this = this;

          this.tagCountGroupByTagNameList.option.legend.formatter = function (
            name
          ) {
            let tagCountGroupByTagNameList = null;
            let pieLeftCount = null;
            let dbLeTypeCount = null;
            _this.tagCountGroupByTagNameList.source.forEach((item) => {
              pieLeftCount = pieLeftCount + item.count;
              if (item.tagName == name) {
                tagCountGroupByTagNameList = item.tagName + " | ";
                dbLeTypeCount = " " + item.count;
              }
            });
            tagCountGroupByTagNameList =
              tagCountGroupByTagNameList +
              getPercent(dbLeTypeCount, pieLeftCount) +
              dbLeTypeCount;

            return tagCountGroupByTagNameList;
          };
          this.sensitiveBusiness.source =
            response.data.sensTableCountGroupByApplicationSystem;
          this.importantBusiness.source =
            response.data.TagsTableCountGroupByApplicationSystem;
        } else {
          this.$GlobalErrorConfirm(
            "数据加载失败",
            response.msg,
            "重新加载"
          ).then(() => {
            this.queryHomeTopList();
          });
        }
      });
    },

    queryHomeList() {
      queryHomeList({}).then((response) => {
        if (response && response.code === 200) {
          this.kpi_4.value = response.data.sensitiveTableNum;
          let pieLeftDataSet = response.data.leTypeList.reduce((r, c) => {
            let i = response.data.dataLevelVoR.findIndex(
              (f) => f.levelId === c.level
            );
            if (i > -1) {
              c.leTypeName = response.data.dataLevelVoR[i].name;
            }
            if (r.length < 5) {
              r.push(c);
            }
            return r;
          }, []);
          this.pieLeftDataSet.source = pieLeftDataSet;

          this.pieRightDataSet.source =
            response.data.dataTypeList.length > 5
              ? response.data.dataTypeList.slice(0, 5)
              : response.data.dataTypeList;
          this.barLeftDataSet.source = response.data.dataDbSensCountList;
          let _this = this;

          this.pieRightDataSet.option.legend.formatter = function (name) {
            let pieRightDataSet = null;
            let pieLeftCount = null;
            let dbLeTypeCount = null;
            _this.pieRightDataSet.source.forEach((item) => {
              pieLeftCount = pieLeftCount + item.count;
              if (item.typeName == name) {
                pieRightDataSet = item.typeName + " | ";
                dbLeTypeCount = " " + item.count;
              }
            });
            pieRightDataSet =
              pieRightDataSet +
              getPercent(dbLeTypeCount, pieLeftCount) +
              dbLeTypeCount;

            return pieRightDataSet;
          };
          this.pieLeftDataSet.option.legend.formatter = function (name) {
            let pieLeftDataSet = "";
            let pieLeftCount = 0;
            let dbLeTypeCount = "";
            _this.pieLeftDataSet.source.forEach((item) => {
              pieLeftCount = pieLeftCount + item.dbLeTypeCount;
              if (item.leTypeName == name) {
                pieLeftDataSet = item.leTypeName + " | ";
                dbLeTypeCount = " " + item.dbLeTypeCount;
              }
            });
            pieLeftDataSet =
              pieLeftDataSet +
              getPercent(dbLeTypeCount, pieLeftCount) +
              dbLeTypeCount;
            return pieLeftDataSet;
          };
        } else {
          this.$GlobalErrorConfirm(
            "数据加载失败",
            response.msg,
            "重新加载"
          ).then(() => {
            this.queryHomeList();
          });
        }
      });
    },

    queryHomeDbCount() {
      queryHomeDbCount({}).then((response) => {
        if (response && response.code === 200) {
          this.kpi_1.value = response.data.dbCount;
        }
      });
    },
    queryHomeTableCount() {
      queryHomeTableCount({}).then((response) => {
        if (response && response.code === 200) {
          this.kpi_3.value = response.data.tableCount;
        }
      });
    },

    queryHomeColumnCount() {
      queryHomeColumnCount({}).then((response) => {
        if (response && response.code === 200) {
          this.kpi_5.value = response.data.columnCount;
        }
      });
    },

    queryHomeDbAccountCount() {
      queryHomeDbAccountCount({}).then((response) => {
        if (response && response.code === 200) {
          this.kpi_2.value = response.data.dbAccountCount;
        }
      });
    },

    queryHomeleWordList() {
      queryHomeleWordList({}).then((response) => {
        if (response && response.code === 200) {
          response.data.leWordeList && response.data.leWordeList.length
            ? response.data.leWordeList.map((v) => {
                this.minganTotleCount = this.minganTotleCount + v.dbLeTypeCount;
              })
            : null;
          this.barRightDataSet.source = response.data.leWordeList.slice(0, 10);
        }
      });
    },

    listInfo() {
      this.loading = true;
      listInfo({}).then((response) => {
        this.loading = false;
        if (response && response.code === 200) {
          // this.minganTotle = 0
          // response.data.leTypeList && response.data.leTypeList.length
          //   ? response.data.leTypeList.map((v) => {
          //     this.minganTotle = this.minganTotle + v.dbLeTypeCount
          //   })
          //   : null
          this.mingan2Totle = 0;
          response.data.leList && response.data.leList.length
            ? response.data.leList.map((v) => {
                this.mingan2Totle = this.mingan2Totle + v.dbLeTypeCount;
              })
            : null;

          this.kpi_5.value = this.minganTotleCount;

          this.kpi_1.value = response.data.dbCount;
          this.kpi_2.value = response.data.dbAccountCount;
          this.kpi_3.value = response.data.tableCount;
          // this.kpi_4.value = response.data.sensitiveTableNum;

          response.data.leWordeList && response.data.leWordeList.length
            ? response.data.leWordeList.map((v) => {
                this.minganTotleCount = this.minganTotleCount + v.dbLeTypeCount;
              })
            : null;
          this.barRightDataSet.source = response.data.leWordeList.slice(0, 10);

          // let pieLeftDataSet = response.data.leTypeList.reduce((r, c) => {
          //   let i = response.data.dataLevelVoR.findIndex(
          //     f => f.levelId === c.level
          //   );
          //   if (i > -1) {
          //     c.leTypeName = response.data.dataLevelVoR[i].name;
          //   }
          //   if (r.length < 5) {
          //     r.push(c);
          //   }
          //   return r;
          // }, []);
          // this.pieLeftDataSet.source = pieLeftDataSet;

          // response.data.dataLevelVoR.forEach((f) => {
          //   let index = response.data.leTypeList.findIndex(
          //     (v) => v.dbLeTypeName === f.name
          //   );
          //   if (index === -1) {
          //     pieLeftDataSet.push({
          //       dbLeTypeName: f.name,
          //       dbLeTypeCount: 0,
          //     });
          //   }
          // });
        } else {
          this.$GlobalErrorConfirm(
            "数据加载失败",
            response.msg,
            "重新加载"
          ).then(() => {
            this.listInfo();
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.execution-history-overview-wrap {
  width: 100%;
  height: 100%;
  overflow-y: scroll;

  .chart-container {
    height: 400px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0;
    border-radius: 4px;
  }

  .grid-column-4 {
    display: grid;
    grid-column-gap: 12px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }

  .grid-column-2 {
    display: grid;
    grid-column-gap: 12px;
    grid-template-columns: 1fr 1fr;
  }

  .grid-column-1 {
    display: grid;
    grid-column-gap: 12px;
    grid-template-columns: 1fr;
  }

  .column-divided {
    height: 12px;
    width: 100%;
  }
}
</style>
